<template>
  <div class="channel">
    <van-popup v-model="show" position="bottom" :style="{ height: '80%' }">
      <!-- 我的频道 -->
      <van-cell-group>
        <van-cell title="我的频道">
          <template #default>
            <van-button type="danger" round size="mini" plain @click="cross=!cross">{{cross===false ? '编辑' : '完成'}}</van-button>
          </template>
        </van-cell>
      </van-cell-group>
      <van-grid>
        <van-grid-item v-for="(item, index) in channelList" :key="index" class="itemf">
          <template #text>
            <span class="item-text" :class="{active: active === index}" @click="updateColor(index)">{{ item.name }}</span><van-icon name="clear" class="item-icon" v-if="cross && index !== 0" @click.stop="delChannel(index)" />
          </template>
        </van-grid-item>
      </van-grid>
      <!-- 频道推荐 -->
      <van-cell-group>
        <van-cell title="频道推荐"></van-cell>
      </van-cell-group>
      <van-grid>
        <van-grid-item v-for="(item, index) in recommengChannel" :key="index" :text="item.name" @click="addChannels(item)" />
      </van-grid>
    </van-popup>
  </div>
</template>

<script>
import { AllChannelsList, editChannels } from '@/api/channels.js'
import { localSet } from '@/utils/local.js'
export default {
  props: ['channelList', 'active'],
  data () {
    return {
      show: false,
      // 控制叉叉是否显示隐藏
      cross: false,
      // 所有频道数据
      allChannel: []
    }
  },
  methods: {
    async getAllChannel () {
      const res = await AllChannelsList()
      // console.log('全部频道列表', res)
      this.allChannel = res.data.channels
    },
    // 新增频道列表
    async addChannels (item) {
      // 在此之前给频道数据加上其他的属性，避免新增频道点击时获取不到数据报错
      this.$set(item, 'articleList', [])
      this.$set(item, 'loading', false)
      this.$set(item, 'finished', false)
      this.$set(item, 'isLoading', false)
      // 点击将item添加到我的频道中
      this.channelList.push(item)
      // 这里不需要再删除频道推荐中的数据，因为计算属性已经帮我们做过了
      // 把修改后的数据保存
      const token = this.$store.state.userInfo.token
      if (!token) {
      // 判断：如果未登录，则将数据保存到本地localstorage
        localSet('channels', this.channelList)
      } else {
        // 已登录，则将修改的数据保存到服务器
        // 获取接口需要的参数 (推荐--这个数据不能对其操作，所以要用slice将其排除,相应的seq也该从2开始)
        const newArr = this.channelList.slice(1).map((item, index) => {
          return {
            id: item.id,
            seq: index + 2
          }
        })
        console.log(newArr)
        // 调用接口
        const res = await editChannels(newArr)
        console.log('修改频道数据：', res)
      }
    },
    // 删除频道数据
    async delChannel (index) {
      console.log('index:', index)
      console.log('active', this.active)
      if (this.active > index) {
        // index = index + 1
        this.$emit('declare')
      }
      this.channelList.splice(index, 1)
      // 判断用户是否登录
      const token = this.$store.state.userInfo.token
      // 未登录：将修改的数据存到本地（localstorage）
      if (!token) {
        localSet('channels', this.channelList)
      } else {
        // 获取接口参数(排除掉 推荐 这一数据，不对它作操作)
        const newArr = this.channelList.slice(1).map((item, index) => {
          return {
            id: item.id,
            seq: index + 2
          }
        })
        // 已登录：将修改的数据保存至服务器中
        await editChannels(newArr)
      }
    },
    // 点击高亮显示频道数据
    updateColor (index) {
      // console.log(index)
      // 将这个index传过去，active===index单向数据流
      this.$emit('update:active', index)
    }
  },
  created () {
    this.getAllChannel()
  },
  // 计算属性：一旦依赖项（this.channelList，this.allChannel）发生改变，计算属性会重新计算
  computed: {
    recommengChannel () {
      const ids = this.channelList.map(item => {
        return item.id
      })
      const newArr = this.allChannel.filter(item => {
        return !ids.includes(item.id)
      })
      return newArr
    }
  }
}
</script>

<style lang="less" scoped>
.channel{
  .itemf{
  position: relative;

  .item-text{
    color: #646566;
    font-size: 12px;
  }

  .item-icon{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    color: #646566;
  }

  .active{
    color: #f00;
  }
}
}

</style>
